<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>限制可拖放的元素示例</title>
  <link rel="stylesheet" href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css">
  <script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
  <script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
  <style>
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  </style>
  <script type="text/javascript">
	  $(function() {
		$( "#draggable, #draggable-nonvalid" ).draggable(); //开启拖放
		$( "#droppable" ).droppable({                      //设置拖放放置参数
		  accept: "#draggable",                             //设置允许拖放的ID
		  activeClass: "ui-state-hover",                    //当鼠标经过时的样式
		  hoverClass: "ui-state-active",                    //当鼠标在上面移动时的样式
		  drop: function( event, ui ) {                   //当放置时的事件处理代码
			$( this )
			  .addClass( "ui-state-highlight" )             //添加CSS样式类
			  .find( "p" )
				.html( "已经放置到了此目的地!" );           //设置此目的地的文本内容
		  }
		});
	  });
  </script>
</head>
<body>
 
<div id="draggable-nonvalid" class="ui-widget-content">
  <p>这个元素可以拖动但是不能被放置到目标元素</p>
</div>
 
<div id="draggable" class="ui-widget-content">
  <p>拖动我到目的地</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>仅接收:'#draggable'元素</p>
</div>
</body>
</html>
